:root {
    --unit: 5px ;
  }
  @media (max-width: 576px) {
    :root {
        --unit: 2.5px ;
      };
}


/* html */
html{
    font-size: 62.5%;
}
/* btn */
.btn {display:inline-block;vertical-align: top;border: 0;text-decoration: none;
cursor: pointer;
}
/* Общий контенер */
.page{overflow: hidden;display: flex;flex-direction: column;min-height: 100vh;}
/* отступы общие */
.m-5{margin:calc(var(--unit) * 1);}
.p-5{padding:calc(var(--unit) * 1);}
.m-10{margin:calc(var(--unit) * 2);}
.p-10{padding:calc(var(--unit) * 2);}
.m-15{margin:calc(var(--unit) * 3);}
.p-15{padding:calc(var(--unit) * 3);}
.m-20{margin:calc(var(--unit) * 4);}
.p-20{padding:calc(var(--unit) * 4);}
.m-25{margin:calc(var(--unit) * 5);}
.p-25{padding:calc(var(--unit) * 5);}
.m-30{margin:calc(var(--unit) * 6);}
.p-30{padding: calc(var(--unit) * 6);}
.m-35{margin:calc(var(--unit) * 7);}
.p-35{padding:calc(var(--unit) * 7);}
.m-40{margin:calc(var(--unit) * 8);}
.p-40{padding:calc(var(--unit) * 8);}
.m-45{margin:calc(var(--unit) * 9);}
.p-45{padding:calc(var(--unit) * 9);}
.m-50{margin:calc(var(--unit) * 10);}
.p-50{padding:calc(var(--unit) * 10);}
.m-75{margin:calc(var(--unit) * 15);}
.p-75{padding:calc(var(--unit) * 15);}
.m-100{margin:calc(var(--unit) * 20);}
.p-100{padding:calc(var(--unit) * 20);}
.m-125{margin:calc(var(--unit) * 25);}
.p-125{padding:calc(var(--unit) * 25);}
.m-150{margin:calc(var(--unit) * 30);}
.p-150{padding:calc(var(--unit) * 30);}
/* top */
.mt-5{margin-top:calc(var(--unit) * 1);}
.pt-5{padding-top:calc(var(--unit) * 1);}
.mt-10{margin-top:calc(var(--unit) * 2);}
.pt-10{padding-top:calc(var(--unit) * 2);}
.mt-15{margin-top:calc(var(--unit) * 3);}
.pt-15{padding-top:calc(var(--unit) * 3);}
.mt-20{margin-top:calc(var(--unit) * 4);}
.pt-20{padding-top:calc(var(--unit) * 4);}
.mt-25{margin-top:calc(var(--unit) * 5);}
.pt-25{padding-top:calc(var(--unit) * 5);}
.mt-30{margin-top:calc(var(--unit) * 6);}
.pt-30{padding-top:calc(var(--unit) * 6);}
.mt-35{margin-top:calc(var(--unit) * 7);}
.pt-35{padding-top:calc(var(--unit) * 7);}
.mt-40{margin-top:calc(var(--unit) * 8);}
.pt-40{padding-top:calc(var(--unit) * 8);}
.mt-45{margin-top:calc(var(--unit) * 9);}
.pt-45{padding-top:calc(var(--unit) * 9);}
.mt-50{margin-top:calc(var(--unit) * 10);}
.pt-50{padding-top:calc(var(--unit) * 10);}
.mt-75{margin-top:calc(var(--unit) * 15);}
.pt-75{padding-top:calc(var(--unit) * 15);}
.mt-100{margin-top:calc(var(--unit) * 20);}
.pt-100{padding-top:calc(var(--unit) * 20);}
.mt-125{margin-top:calc(var(--unit) * 25);}
.pt-125{padding-top:calc(var(--unit) * 25);}
.mt-150{margin-top:calc(var(--unit) * 30);}
.pt-150{padding-top:calc(var(--unit) * 30);}
.mt-200{margin-top:calc(var(--unit) * 40);}
/* right */
.mr-5{margin-right:calc(var(--unit) * 1);}
.pr-5{padding-right:calc(var(--unit) * 1);}
.mr-10{margin-right:calc(var(--unit) * 2);}
.pr-10{padding-right:calc(var(--unit) * 2);}
.mr-15{margin-right:calc(var(--unit) * 3);}
.pr-15{padding-right:calc(var(--unit) * 3);}
.mr-20{margin-right:calc(var(--unit) * 4);}
.pr-20{padding-right:calc(var(--unit) * 4);}
.mr-25{margin-right:calc(var(--unit) * 5);}
.pr-25{padding-right:calc(var(--unit) * 5);}
.mr-30{margin-right:calc(var(--unit) * 6);}
.pr-30{padding-right:calc(var(--unit) * 6);}
.mr-35{margin-right:calc(var(--unit) * 7);}
.pr-35{padding-right:calc(var(--unit) * 7);}
.mr-40{margin-right:calc(var(--unit) * 8);}
.pr-40{padding-right:calc(var(--unit) * 8);}
.mr-45{margin-right:calc(var(--unit) * 9);}
.pr-45{padding-right:calc(var(--unit) * 9);}
.mr-50{margin-right:calc(var(--unit) * 10);}
.pr-50{padding-right:calc(var(--unit) * 10);}
.mr-75{margin-right:calc(var(--unit) * 15);}
.pr-75{padding-right:calc(var(--unit) * 15);}
.mr-100{margin-right:calc(var(--unit) * 20);}
.pr-100{padding-right:calc(var(--unit) * 20);}
.mr-125{margin-right:calc(var(--unit) * 25);}
.pr-125{padding-right:calc(var(--unit) * 25);}
.mr-150{margin-right:calc(var(--unit) * 30);}
.pr-150{padding-right:calc(var(--unit) * 30);}
/* bottom */
.mb-5{margin-bottom:calc(var(--unit) * 1);}
.pb-5{padding-bottom:calc(var(--unit) * 1);}
.mb-10{margin-bottom:calc(var(--unit) * 2);}
.pb-10{padding-bottom:calc(var(--unit) * 2);}
.mb-15{margin-bottom:calc(var(--unit) * 3);}
.pb-15{padding-bottom:calc(var(--unit) * 3);}
.mb-20{margin-bottom:calc(var(--unit) * 4);}
.pb-20{padding-bottom:calc(var(--unit) * 4);}
.mb-25{margin-bottom:calc(var(--unit) * 5);}
.pb-25{padding-bottom:calc(var(--unit) * 5);}
.mb-30{margin-bottom:calc(var(--unit) * 6);}
.pb-30{padding-bottom:calc(var(--unit) * 6);}
.mb-35{margin-bottom:calc(var(--unit) * 7);}
.pb-35{padding-bottom:calc(var(--unit) * 7);}
.mb-40{margin-bottom:calc(var(--unit) * 8);}
.pb-40{padding-bottom:calc(var(--unit) * 8);}
.mb-45{margin-bottom:calc(var(--unit) * 9);}
.pb-45{padding-bottom:calc(var(--unit) * 9);}
.mb-50{margin-bottom:calc(var(--unit) * 10);}
.pb-50{padding-bottom:calc(var(--unit) * 10);}
.mb-75{margin-bottom:calc(var(--unit) * 15);}
.pb-75{padding-bottom:calc(var(--unit) * 15);}
.mb-100{margin-bottom:calc(var(--unit) * 20);}
.pb-100{padding-bottom:calc(var(--unit) * 20);}
.mb-125{margin-bottom:calc(var(--unit) * 25);}
.pb-125{padding-bottom:calc(var(--unit) * 25);}
.mb-150{margin-bottom:calc(var(--unit) * 30);}
.pb-150{padding-bottom:calc(var(--unit) * 30);}
/* left */
.ml-5{margin-left:calc(var(--unit) * 1);}
.pl-5{padding-left:calc(var(--unit) * 1);}
.ml-10{margin-left:calc(var(--unit) * 2);}
.pl-10{padding-left:calc(var(--unit) * 2);}
.ml-15{margin-left:calc(var(--unit) * 3);}
.pl-15{padding-left:calc(var(--unit) * 3);}
.ml-20{margin-left:calc(var(--unit) * 4);}
.pl-20{padding-left:calc(var(--unit) * 4);}
.ml-25{margin-left:calc(var(--unit) * 5);}
.pl-25{padding-left:calc(var(--unit) * 5);}
.ml-30{margin-left:calc(var(--unit) * 6);}
.pl-30{padding-left:calc(var(--unit) * 6);}
.ml-35{margin-left:calc(var(--unit) * 7);}
.pl-35{padding-left:calc(var(--unit) * 7);}
.ml-40{margin-left:calc(var(--unit) * 8);}
.pl-40{padding-left:calc(var(--unit) * 8);}
.ml-45{margin-left:calc(var(--unit) * 9);}
.pl-45{padding-left:calc(var(--unit) * 9);}
.ml-50{margin-left:calc(var(--unit) * 10);}
.pl-50{padding-left:calc(var(--unit) * 10);}
.ml-75{margin-left:calc(var(--unit) * 15);}
.pl-75{padding-left:calc(var(--unit) * 15);}
.ml-100{margin-left:calc(var(--unit) * 20);}
.pl-100{padding-left:calc(var(--unit) * 20);}
.ml-125{margin-left:calc(var(--unit) * 25);}
.pl-125{padding-left:calc(var(--unit) * 25);}
.ml-150{margin-left:calc(var(--unit) * 30);}
.pl-150{padding-left:calc(var(--unit) * 30);}






/*  */
.w100p{width:100%}
.h100p{height:100%}
.d-ib{display:inline-block}
.d-if{display:inline-flex}
.d-block{display:block}
.d-flex{display:flex}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.align-center{align-items:center}
.align-end{align-items:flex-end}
.align-start{align-items:flex-start}
.flex-column{flex-direction:column}
.flex-row{flex-direction:row}
.flex-auto{flex:1 1 auto}
.flex{flex:1}
.flex-wrap{flex-wrap:wrap}
.m-auto{margin:auto}
.ml-auto{margin-left:auto}
.mr-auto{margin-right:auto}
.text-center{text-align:center}
.text-capitalize{text-transform:capitalize}
.text-uppercase{text-transform:uppercase}
.text-lowercase{text-transform:lowercase}
.fw-bold{font-weight:bold}
.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Опасити */
.opacity-0{opacity:0}
.opacity-1{opacity:.1}
.opacity-2{opacity:.2}
.opacity-3{opacity:.3}
.opacity-4{opacity:.4}
.opacity-5{opacity:.5}
.opacity-6{opacity:.6}
.opacity-7{opacity:.7}
.opacity-8{opacity:.8}
.opacity-9{opacity:.9}
.opacity-10{opacity:1}
/* Позиция */
.pos-r{position:relative}
.pos-a{position:absolute}
/* Курсор */
.cu-p{cursor:pointer}
/* Сброс */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
:focus {outline: 0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
body {line-height: 1;}
ol,ul {list-style: none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration {-webkit-appearance: none;-moz-appearance: none;}
input[type=search] {-webkit-appearance: none;-moz-appearance: none;box-sizing: content-box;}
textarea {overflow: auto;vertical-align: top;resize: vertical;}
audio,canvas,video {display: inline-block;*display: inline;*zoom: 1;max-width: 100%;}
audio:not([controls]) {display: none;height: 0;}
[hidden] {display: none;}
html {font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
a:focus {outline: thin dotted;}
a:active,a:hover {outline: 0;}
img {border: 0;-ms-interpolation-mode: bicubic;}
figure {margin: 0;}
form {margin: 0;}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
legend {border: 0;padding: 0;white-space: normal;*margin-left: -7px;}
button,input,select,textarea {font-size: 100%; margin: 0;vertical-align: baseline;*vertical-align: middle;}
button,input {line-height: normal;}button,select {text-transform: none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;*overflow: visible;}
button[disabled],html input[disabled] {cursor: default;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box;padding: 0;*height: 13px;*width: 13px;}
input[type="search"] {-webkit-appearance: textfield;box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
textarea {overflow: auto;vertical-align: top;}
table {border-collapse: collapse;border-spacing: 0;}
html,button,input,select,textarea {color: #222;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
img {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}
.link {text-decoration: none;color: inherit;-webkit-transition: .3s;transition: .3s;}